<template>
	<view class="bg">
		<xl-navbar title="分隔提示 标签" fixed shadow></xl-navbar>
		<view class="title">基础样式：懒加载、再次加载刷新、固定窗口</view>
		<xl-load-refresh :load="load" refresh reduceHeight="200" :padding="[20, 30]" @provider="provider">
			<template v-slot:list="{ items }">
				<!-- 数据列表 -->
				<view v-for="(item,index) in items" :key="index" class="box">
					{{item}}
				</view>
			</template>
		</xl-load-refresh>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const load = ref(false)
	onMounted(()=>{
		setTimeout(() => {
			load.value = true
		}, 1000)
	})

	// 上拉加载、下拉刷新更新数据方法
	function provider(pageInfo, push){
		console.log(pageInfo);
		// 模拟请求成功后的回调
		setTimeout(() => {
			push([1,2,3,4,5,6,7,8,9,10])
		}, 1600)
	}
</script>

<style lang="scss" scoped>
	.box{
		height: 180rpx;
		line-height: 180rpx;
		background: #0a93ff;
		text-align: center;
		color: #ffffff;
		margin-bottom: 5rpx;
	}
</style>